/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-21 11:28:36
 * @Description: 首页-控制台-我的指令
 * 关于 status：
 *  0 - 已反馈
 *  1 - 已接受
 *  2 - 未接收
 */
import React from "react";
import "./style.scss";
import { Pagination, Modal, Button } from "antd";
import { observer, inject } from "mobx-react";

@inject("MyInstructionsStore")
@observer
class MyInstructions extends React.Component {
    componentDidMount() {
        this.props.MyInstructionsStore.getTopData();
        this.props.MyInstructionsStore.getListData();
    }

    state = {
        showDetail: false
    };

    topDataMatchIcon(topData) {
        const data = [
            { name: "总数量", icon: "gkyj_yjzsl", value: 12 },
            { name: "已接收", icon: "wdzl_yjs", value: 4 },
            { name: "未接收", icon: "wdzl_wjs", value: 1 },
            { name: "已反馈", icon: "wdzl_yfk", value: 8 }
        ];
        topData.forEach(d => {
            data.forEach(item => {
                if (item.name === d.name) {
                    item.value = d.value;
                }
            });
        });
        return data;
    }

    handShowDetail(status) {
        if (status !== 0) {
            return;
        }
        this.setState({
            showDetail: true
        });
    }

    handleOkModal() {
        // 发送请求
        this.setState({
            showDetail: false
        });
    }

    render() {
        const { showDetail } = this.state;
        const { topData, listData } = this.props.MyInstructionsStore;
        const renderTopData = this.topDataMatchIcon(topData);
        return (
            <div className="my-instructions">
                <h3 className="common-title">我的指令</h3>
                <ul className="top-num-list">
                    {renderTopData.map(d => (
                        <li key={d.icon}>
                            <i className={`icon ${d.icon}-icon`} />
                            <div className="detail">
                                <p className="value">{d.value}</p>
                                <p className="name">{d.name}</p>
                            </div>
                        </li>
                    ))}
                </ul>
                <h3 className="common-title" style={{ marginTop: 20 }}>
                    进行中的指令
                </h3>
                <ul className="lists-data">
                    <li>
                        <span>类型</span>
                        <span>指令目标</span>
                        <span>指定对象</span>
                        <span>下达时间</span>
                        <span>指令状态</span>
                    </li>
                    {listData.map((item, index) => (
                        <li key={`wdzl-${index}`}>
                            <span className={`type type-${item.type}`} />
                            <span>{item.zlmb}</span>
                            <span>{item.zldx}</span>
                            <span>{item.time}</span>
                            <span
                                className={`status-${item.status}`}
                                onClick={() => this.handShowDetail(item.status)}
                            />
                        </li>
                    ))}
                </ul>
                <div className="common-pagination">
                    <Pagination
                        defaultcurrent={6}
                        total={500}
                        onChange={(page, pageSize) => this.props.MyInstructionsStore.changePage(page, pageSize)}
                    />
                </div>
                <Modal
                    title="指令详情"
                    visible={showDetail}
                    destroyOnClose
                    cancelText="取消"
                    footer={
                        <Button type="primary" onClick={() => this.handleOkModal()}>
                            确认
                        </Button>
                    }
                    onCancel={() => this.setState({ showDetail: false })}
                >
                    <ul className="detail-lists">
                        <li>
                            <span>目标</span>
                            <span>中青理财</span>
                        </li>
                        <li>
                            <span>下达人</span>
                            <span>admin</span>
                        </li>
                        <li>
                            <span>指令下达时间</span>
                            <span>2019-12-12 12:12:12</span>
                        </li>
                        <li>
                            <span>紧急程度</span>
                            <span>普通</span>
                        </li>
                        <li>
                            <span>还有很多...</span>
                        </li>
                    </ul>
                </Modal>
            </div>
        );
    }
}

export default MyInstructions;
